<!DOCTYPE html>
<!-- 单元格内容排列方式、合并单元格 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>
    </head>
    <body>

        <h3>单元格内容排列</h3>
        <ul>
            <li>td 的 align 属性可以设置 单元格内容 的水平排列方式 ( left | center | right )</li>
            <li>td 的 valign 属性可以设置 单元格内容 的竖直排列方式 ( top | middle | bottom )</li>
        </ul>

        <table border="1" width="80%" align="center">
            <tr>
                <td height="100">11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr>
                <td height="100">21</td>
                <td align="center" valign="middle" >22</td>
                <td>23</td>
            </tr>
            <tr>
                <td height="100">31</td>
                <td>32</td>
                <td>33</td>
            </tr>
        </table>

        <hr>

        <h3>使用 td 的 colspan 可以让一个 td 横跨 N个单元格 的空间</h3>

        <table border="1" width="80%" align="center">
            <tr>
                <td colspan="4">11</td>
                <!--
                <td>12</td>
                <td>13</td>
                <td>14</td>
                -->
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
            </tr>
        </table>


        <h3>使用 td 的 rowspan 可以让一个 td 纵跨 N个单元格 的空间</h3>

        <table border="1" width="80%" align="center">
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
            </tr>
            <tr>
                <td>21</td>
                <td rowspan="3" align="center" valign="middle">
                    <strong>22</strong>
                </td>
                <td>23</td>
                <td>24</td>
            </tr>
            <tr>
                <td>31</td>
                <!-- <td>32</td> -->
                <td>33</td>
                <td>34</td>
            </tr>
            <tr>
                <td>41</td>
                <!-- <td>42</td> -->
                <td>43</td>
                <td>44</td>
            </tr>
            <tr>
                <td>51</td>
                <td>52</td>
                <td>53</td>
                <td>54</td>
            </tr>
        </table>
        
    </body>
</html>